*{
	margin: 0;
	padding: 0;
	font-family: "微软雅黑";
	font-size: 14px;
}
html{
	width: 100%;
	height: 100%;
}
body{
	background: #f1f1f1;	
	line-height: 1.5;
	width:100%;
	height:100%;
	overflow:hidden;
}

.list-group,.logo,.music,.down-link{
	position: fixed;
	
}
.container{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}

.container .screen{
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.container .screen1{	
	
	background: url(../img/bg02.jpg);
	background-size: 100% 100%;	
}

.container .screen2{	
	background: url(../img/bg05.jpg);
	background-size: 100% 100%;	
}


.container .screen3{	
	background: url(../img/bg01.jpg);
	background-size: 100% 100%;	
}
.container .screen4{	
	background: url(../img/bg03.jpg);
	background-size: 100% 100%;	
}
.container .screen5{	
	background: url(../img/bg03.jpg);
	background-size: 100% 100%;	
}
.container .screen6{	
	background: url(../img/bg06.jpg);
	background-size: 100% 100%;	
}



.logo{
	position: fixed;	
	top: 20px;
	left: 50px;
}
.music{
	position: fixed;	
	top: 20px;
	right: 20px;
}
.container .screen1 .cloud{
	position:fixed;
	width: 350px;
	height: 350px;
	zoom: 0.5;
	top: 100px;		
	animation: cloudmove 10s linear infinite;	
	-webkit-animation: cloudmove 10s linear infinite;
	
}
@keyframes cloudmove{	
	from{left:100%;}
	to{left:0;}
}
@-webkit-keyframes cloudmove{
	from{left:100%;}
	to{left:0;}
}


.container .screen1 .title{
	position: fixed;
	top: 250px;
	left: 400px;
	text-align: center;
		
}
.container .screen1 .title span{
	position: relative;
	transition: all 2s;
	display: inline-block;
	
}
.title span:nth-of-type(1){
	width: 200px;	
	background:url('../img/logo-text.png') no-repeat;	
	padding-right: -50px;	
	background-position-x: 77px;	
}
.container  .active .title  span:nth-of-type(2){	
	margin-left: -800px;
	transform: rotate(-180deg);
}


.container .screen1 .quote{
	color: white;	
	width: 400px;
	height: 10px;
	position: fixed;
	left: 500px;
	top: 350px;
}

.container .screen1 .qiqiu{
	width: 300px;
	height: 350px;
	position: fixed;
	left: 850px;
	top: 300px;	
	margin-top:80px ;
	zoom: 0.7;
	animation:move 1s infinite ;
}
@keyframes move{
	0%{	top: 10px;	}
	50%{top: 5px;	}
	100%{top: 10px;	}
	}

@-webkit-keyframes move{
	0%{	top: 10px;	}
	50%{top: 5px;	}
	100%{top: 10px;	}
}

nav{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 60px;
	background: #A9A9A9;
	/*opacity: 0.6;表示全部透明包括字体*/
	
	background: rgba(0,0,0,0.6);
	/*opacity: 0.6;*/
}
.music img{
	width: 50px;
	height: 50px;
	background-size: 100% 100%;
	animation: myfrist 2s linear infinite;
	animation-play-state:paused ;
}
.list-group{
	position: fixed;
	
	top: 250px;
	right: 10px;
	
}
ul li{
	list-style: none;
}
.list-group ul li{
	border-radius: 50%;	
	height:20px;
	width:20px;	
	background: url(../img/side_bg.png);
	background-size: 100% 100%;
	margin: 10px;
}

.list-group ul li.current{
	animation: myfrist 2s linear infinite;
}
.down-link{
	position: fixed;
	top: 400px;
	left: 510px;
}
.context{
	color: #fff;
	position: fixed;
	left: 510px;
	top: 490px;
}


@keyframes myfrist{
	0%{
		transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
	}
	100%{
		transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
	}
}

nav ul{
	width: 50%;
	background: darkgray;
	position: relative;
	margin:0 auto;	
}
nav ul li{	
	list-style: none;
	width: 130px;
	height: 60px;
	line-height: 60px;	
	float: left;	
	text-align: center;
	color: white;
	transition: background 0.8s;	
}
nav ul li:nth-of-type(1):hover{
	
	background: #0033FF;
}
nav ul li:nth-of-type(2):hover{
	background: #00CC66;
}
nav ul li:nth-of-type(3):hover{
	background: #3300FF;
}
nav ul li:nth-of-type(4):hover{
	background: #33FFFF;
}
nav ul li:nth-of-type(5):hover{
	background: #FF0033;
}